import styled from "styled-components";

const ListStyle = styled.div`
overflow: hidden;
border-radius: .1rem;
background-color: #FFF;
width: 3.35rem;
margin: 0 auto;
/* height: 1.07rem; */
padding:.25rem .15rem;
margin-top: .16rem;
.icon{
    float: left;
    margin:0 .19rem 0 .05rem;
}
.content{
    display: flex;
    justify-content: space-between;

.title{
    color: #333;
    font-size: .2rem;
    font-weight: 600;
    span{
        color: #CCC;
        font-size: .14rem;
    }
}
.date{
    color: #999;
    font-size: .14rem;
    /* line-height: .56rem; */
    margin-top: 0.16rem;
}

}

`

const ContentStyle = styled.div`
margin-top: .04rem;
`

const CartStyle = styled.div`
margin: .2rem auto;
width:calc(100vw - .4rem);
background-color: #FFF;
border-radius:.2rem ;
overflow: hidden;
padding: .2rem ;
margin-top: .1rem;
box-sizing: border-box;
.title{
    /* margin-top: .2rem;
    margin-left: .2rem; */
    span{
      color: #CCC;
        font-size: .12rem;
    }
}
`

const RecordStyle=styled.div`
margin: .1rem auto;
width:calc(100vw - .4rem);
background-color: #fff;
padding:.2rem ;
border-radius: .2rem;
display: flex;
.left{
    border-right: .01rem solid #999;
    padding-right: .20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    .date{
        font-size:.16rem;
    }
    .year{
        font-size: .12rem;
        color: #CCC;
    }
}
.right{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: .20rem;
    /* vertical-align:middle; */
    .value{
        font-size: .2rem;
        .unit{
            font-size: .14rem;
            color: #CCC;
        }
    }
    
}
`

const TopStyle = styled.div`
width:calc(100vw - .4rem);
margin: .2rem auto;
border-radius: .2rem;
background-color: #FFF;
padding:.4rem .2rem;
text-align: center;

background-color: ${props => props.bgColor ? props.bgColor :'#6C76F4'};
h2{
    color: #FFF;
    font-size: .4rem;
    span{
        font-size:.16rem;
    }
}
`
export {
    ListStyle,
    ContentStyle,
    CartStyle,
    RecordStyle,
    TopStyle
}